<script setup lang="ts">
import type { PersonalFavoriteVO } from '#/api/company/favorite/personal/model';

import { onMounted, ref, watch } from 'vue';

import { useAccess } from '@vben/access';
import { DictEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';

import {
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
} from '@ant-design/icons-vue';
import {
  Descriptions,
  DescriptionsItem,
  Popconfirm,
  Tooltip,
} from 'ant-design-vue';

import { personalFavoriteChangeStatus } from '#/api/company/favorite/personal';
import { TableSwitch } from '#/components/table';
import { renderDict } from '#/utils/render';

const props = withDefaults(defineProps<{ info: Props; rowKey?: string }>(), {
  rowKey: 'id',
});

const emit = defineEmits<{
  click: [string];
  delete: [any];
  edit: [any];
  preview: [any];
  reload: [];
}>();

const { hasAccessByCodes } = useAccess();

interface Props extends PersonalFavoriteVO {
  active: boolean;
}

const currFavorite = ref<PersonalFavoriteVO>({ ...props.info });

watch(
  () => props.info,
  (val) => {
    currFavorite.value = { ...val };
  },
  { deep: true },
);

onMounted(() => {
  if (props.info) {
    currFavorite.value = { ...props.info };
  }
});

/**
 * TODO: 这里要优化 事件没有用到
 */
function handleClick() {
  const idKey = props.rowKey as keyof PersonalFavoriteVO;
  emit('click', props.info[idKey]);
}

async function statusUpdate(row: PersonalFavoriteVO) {
  const data = {
    id: row.id,
    status: row.status,
  };
  await personalFavoriteChangeStatus(data);
}
</script>

<template>
  <div
    :class="{
      'border-primary': currFavorite.active,
      'bg-active': currFavorite.active,
    }"
    class="cursor-pointer rounded-lg border-[1px] border-solid p-3 transition-shadow duration-300 ease-in-out hover:shadow-lg"
    @click.stop="handleClick"
  >
    <Descriptions :column="1" size="middle">
      <template #title>
        <div :class="{ 'text-primary': currFavorite.active }">
          {{ currFavorite.name }}
        </div>
      </template>
      <template #extra>
        <span class="inline-block text-yellow-500">
          <IconifyIcon icon="mdi:folder-favorite" />
        </span>
      </template>
      <DescriptionsItem label="开放状态">
        <component
          :is="
            renderDict(currFavorite.openStatus, DictEnum.FAVORITE_OPEN_STATUS)
          "
        />
      </DescriptionsItem>
      <DescriptionsItem label="创建时间">
        {{ currFavorite.createTime }}
      </DescriptionsItem>
    </Descriptions>
    <div class="flex w-full items-center justify-between text-[14px]">
      <div class="flex items-center gap-1 overflow-hidden whitespace-nowrap">
        <Tooltip
          :title="
            currFavorite.status === '0'
              ? '收藏夹将永久保留，不会被系统自动清除'
              : '收藏夹将按创建时间开始保留2年，届时系统将自动清除。'
          "
        >
          <TableSwitch
            v-model:value="currFavorite.status"
            :api="() => statusUpdate(currFavorite)"
            :disabled="!hasAccessByCodes(['company:favorite:edit'])"
            checked-text="永久"
            un-checked-text=""
            @reload="emit('reload')"
          />
        </Tooltip>
      </div>
      <div class="flex items-center gap-1 text-nowrap opacity-50">
        <Tooltip
          placement="top"
          title="详情"
          @click.stop="emit('preview', currFavorite)"
        >
          <a-button size="small">
            <EyeOutlined />
          </a-button>
        </Tooltip>
        <Tooltip
          placement="top"
          title="编辑"
          @click.stop="emit('edit', currFavorite)"
        >
          <a-button size="small">
            <EditOutlined />
          </a-button>
        </Tooltip>
        <Popconfirm
          placement="left"
          title="确认删除？"
          @confirm.stop="emit('delete', currFavorite)"
        >
          <Tooltip placement="top" title="删除">
            <a-button danger size="small" @click.stop="">
              <DeleteOutlined />
            </a-button>
          </Tooltip>
        </Popconfirm>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-active {
  background-color: hsl(var(--primary) / 15%);
}

:deep(.ant-descriptions .ant-descriptions-header) {
  margin-bottom: 12px !important;
}

:deep(.ant-descriptions-item) {
  padding-bottom: 8px !important;
}
</style>
